<template>
  <view class="st-width-100-pc">

    <view class="st-width-100-pc page-detail" v-if="userInfo">
      <!-- 轮播图 -->
      <swiper class="swiper"  :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item v-for="pic in computedUserAlbumUrl">
          <image @tap="previewImage(pic)" mode="aspectFill" :src="$stUrlTools.appendParam(pic,$config.imageParam)" class="st-height-100-pc st-width-100-pc"></image>
        </swiper-item>
      </swiper>
      <!-- 基本信息 -->
      <view class="info-box ">
        <!--昵称、性别-->
        <view class="st-flex-align-between">
          <view>
            <text class="iconfont" :class="{'icon-nv': userInfo.genderDictValue == 'f','icon-nan': userInfo.genderDictValue == 'm'}">
              {{userInfo.nickname}}
            </text>
          </view>

          <!-- 婚姻状态 -->
          <text type="married_status">{{userInfo.maritalStatusDictName}}</text>
        </view>

        <view  class="st-flex-align-between" v-if="userInfo.birthDay">
          <text class='iconfont icon-shengri'> {{userInfo.birthDay}} </text>
        </view>
        <view  class="st-flex-align-between info-content">
          <text class='iconfont icon-xingzuo' v-if="userInfo.constellationDictName">{{userInfo.constellationDictName}}</text>
          <text class='iconfont icon-shengao' v-if="userInfo.height">{{userInfo.height}}cm</text>
          <text class='iconfont icon-tizhong' v-if="userInfo.weight">{{userInfo.weight}}kg</text>
        </view>
        <view class="info-content" v-if="userInfo.education">
          <text class='iconfont icon-daxuemingcheng'>
            <text>{{userInfo.education}}</text>
            <text class=" font-size-sm">
              {{userInfo.college || ''}} {{userInfo.major || ''}} {{userInfo.profession || ''}}
            </text>
          </text>
        </view>
        <view class="info-content" v-if="userInfo.nowAreaName">
          <text class='iconfont icon-weizhi'>
            {{userInfo.nowAreaName}}
          </text>
        </view>
        <view class="info-content" v-if="userInfo.homeAreaNam">
          <text class='iconfont icon-fl-jia'>
            {{userInfo.homeAreaName}}
          </text>
        </view>
      </view>
      <!-- 生活信息 -->
      <view class="info-box">
        <view>生活信息</view>
        <view class="view-line"></view>
        <view class="info-content">
          <view class="uni-flex uni-row ">
            <text class='iconfont icon-icon-test1 uni-flex-item'>
              <text>{{userInfo.isHasHourse?'有':'无'}}{{userInfo.hourseCity || ''}}</text>
            </text>
            <text class='iconfont icon-cheliang uni-flex-item '>
              <text>{{userInfo.isHasCar?'有':'无'}}{{userInfo.carCity || ''}}</text>
            </text>
          </view>
          <view class="uni-flex uni-row ">
            <text class='iconfont icon-chouyan uni-flex-item' v-if="userInfo.smokingDictName">{{userInfo.smokingDictName}}</text>
            <text class='iconfont icon-hejiu uni-flex-item' v-if="userInfo.drinkingDictName">{{userInfo.drinkingDictName}}</text>
          </view>
          <view class="uni-flex uni-row ">
            <text class='iconfont icon-qianmoney125 uni-flex-item'>
              {{userInfo.monthSalary? userInfo.monthSalary: '保密'}}
            </text>
            <text class='iconfont icon-qianmoney113 uni-flex-item'>
              {{userInfo.yearSalary? userInfo.yearSalary: '保密'}}
            </text>
          </view>
        </view>
      </view>
      <!-- 标签信息 -->
      <view class="info-box">
        <view>标签信息</view>
        <view class="view-line"></view>
        <view class="info-content">
          <view v-for="tag in userInfo.userTags" class="" v-if="tag.contentNames">
            <text class='iconfont' :class="'' + tagIcon(tag.typeDictCode)"></text>
            <text>{{tag.contentNames}} {{tag.selfContent}}</text>
          </view>
        </view>
      </view>
      <!-- 个人介绍 -->
      <view class="info-box">
        <view>个人介绍</view>
        <view class="view-line"></view>
        <view class="info-content">
          <text class=" font-size-sm">{{userInfo.description}}</text>
        </view>
      </view>
      <!-- 择偶标准 -->
      <view class="info-box">
        <view>择偶标准</view>
        <view class="view-line"></view>
        <view class="info-content">
          <text class=" font-size-sm">{{userInfo.standard?userInfo.standard: ''}}</text>
        </view>
      </view>
      <!-- 有意思按钮 -->
      <view class="info-box">
        <button type="primary" @tap="detailEnjoy(userEnjoyStatus)"   v-if="userEnjoyStatus == null || (userEnjoyStatus != null && userEnjoyStatus.isCanEnjoy)">有意思</button>
        <button type="primary" v-else-if="userEnjoyStatus != null && userEnjoyStatus.isEnjoy && !userEnjoyStatus.isEnjoyed">请耐心等待对方的回复哦</button>

        <button type="primary" @tap="copyWxNumber"  v-else-if="userEnjoyStatus != null && userEnjoyStatus.isEnjoy && userEnjoyStatus.isEnjoyed">点击复制微信号</button>

      </view>

    </view>

    <!-- 其它组件-->
    <StWxMpShare ref="fhwxshare" :share-content="shareContent" :title-logo="$config.shareTitleLogo"  :app-code="$config.mpAppCode"></StWxMpShare>
    <!-- 微信自动登录组件 -->
    <StWxMpLogin :has-login-check="()=> hasLogin" ref="wxMpLogin" :app-code="$config.mpAppCode" :on-success="wxLoginSuccess" :auto-login-if-none-login="false"></StWxMpLogin>
  </view>
</template>

<script>
import StWxMpLogin from '../../../../../../../components/wx-mp/web/components/app/StWxMpLogin.vue'

import StWxMpShare from '../../../../../../../components/wx-mp/web/components/app/StWxMpShare';
import {getCurrentDomain, getUrlParam} from '../../../../../../../components/common/web/tools/UrlTools.js'
import EnjoyMixin from "../../mixins/EnjoyMixin";
import UserEnjoyUrl from '../../../../pc/UserEnjoyUrl.js'
import UserVisitUrl from '../../../../pc/UserVisitUrl.js'


export default {
  components: { StWxMpShare ,StWxMpLogin},
  mixins: [EnjoyMixin],
  data() {
    return {
      userId: null,
      // 有意思状态单独维护
      userEnjoyStatus: null,
      userInfo: null,
      // 相册数据
      picData: {},
    };
  },
  computed:{
    // 用户相册地址
    computedUserAlbumUrl(){
      let r = []
      if (this.picData.main) {
        this.picData.main.forEach(item => {
          r.push(item.picUrl)
        })
      }
      if (this.picData.normal) {
        this.picData.normal.forEach(item => {
          r.push(item.picUrl)
        })
      }
      return r
    },
    // 微信公众号分享内容
    shareContent () {
      if(!this.userInfo){
        return {}
      }
      return  {
        title: this.userInfo.name,
        desc: this.userInfo.description,
        imgUrl: this.userInfo.userAvatar,
        link: getCurrentDomain() + '/#/pages/detail/detail?userId=' +  this.userInfo.id

      }
    }
  },
  onLoad(options){
    this.userId = options.userId
    this.loadUserInfoDto()
    this.addUserInfoVisit()
    // 加载有意思状态
    this.loadUserEnjoyStatus()
    // 相册数据
    this.loadPicData()
  },
  methods:{
    // 有意思按钮
    detailEnjoy(userEnjoyStatuss){
      this.enjoy(userEnjoyStatuss,()=>{
        this.wxLogin()
      },'用户详情有意思按钮',()=>{
        this.loadUserEnjoyStatus()
      })
    },
    // 微信登录
    wxLogin() {
      if(this.$refs.wxMpLogin){
        this.$refs.wxMpLogin.oauth2buildAuthorizationUrlAndGoToAuth()
      }
    },
    // 微信登录成功处理
    wxLoginSuccess(){
      // 刷新全局用户登录状态
      this.refreshLoginStatus()
      // 添加用户访问，因为之前的是没有添加成功的，在未登录之前
      this.addUserInfoVisit()
      // 加载有意思状态
      this.loadUserEnjoyStatus()
      // 相册数据
      this.loadPicData()
    },
    // 标签图标处理
    // type 为字典组编码
    tagIcon(type){
      let r = ''
      switch (type) {
        case 'nature_type_parent':
          r = 'icon-smileface'
          break
        case 'hobby_type_parent':
          r = 'icon-xingquaihao'
          break
        case 'food_type_parent':
          r = 'icon-shiwu'
          break
        case 'movie_type_parent':
          r = 'icon-dianying'
          break
        case 'trip_type_parent':
          r = 'icon-lvhang'
          break
        case 'sport_type_parent':
          r = 'icon-yundong101'
          break
      }
      return r
    },
    // 预览轮播图图片
    previewImage(url){

      if(url)
        uni.previewImage({
          current: url,
          urls: this.computedUserAlbumUrl,
          indicator: 'number'
        })
    },
    //加载详细基本信息
    loadUserInfoDto(){
      let self = this
      uni.showLoading({
        title: '加载中'
      })
      self.$http.get('/user-info/' + self.userId + '/detail').then( (response)=> {
        self.userInfo = response.data
        // 有意思状态单独处理
        self.userEnjoyStatus = response.data.userEnjoyStatus
      }).finally(() => {
        uni.hideLoading()
      })
    },
    // 登录成功后调用 加载有意思状态
    loadUserEnjoyStatus(){
      let url = this.$stStringTools.replaceb(UserEnjoyUrl.queryUserEnjoyStatus,{enjoyedUserId: this.userId})
      this.$http.get(url).then( (res)=> {
        // 有意思状态单独处理
        this.userEnjoyStatus = res.data
      }).catch(error => {
        this.userEnjoyStatus = null
      })

    },
    //添加我看了他
    addUserInfoVisit(){
      if(!this.hasLogin){
        return
      }
      let data = {
        visitUserId: this.userId,
        visitTypeDictValue: getUrlParam('from') || 'list' // 默认list 从列表
      }
      this.$http.post(UserVisitUrl.add , data).then( (res) => {
      })
    },
    // 复制微信号
    copyWxNumber(){

      // 请求并复制
      this.$http.get('/user-info/enjoyed/wxNumber/' + this.userId).then(res => {
        uni.setClipboardData({
          data: res.data,
          success(res) {
            uni.showToast({
              icon: 'none',
              title: '复制成功'
            });
          }
        })
      }).catch(error => {
        uni.showToast({
          icon: 'none',
          title: error.data.msg
        });
      })


    },
    // 用户相册
    loadPicData () {

      let self = this
      //加载图片
      this.$http.get('/app/user-album/getList').then(function (res) {
        let content = res.data

        self.picData = content
      }).catch(function () {
        self.picData = {}
      }).finally(() => {
        uni.hideLoading()
      })
    }
  }
}
</script>

<style>
.page-detail .swiper {
  height: 480upx;
}
.page-detail .swiper-item {
  display: block;
  height: 480upx;
  height: 480upx;
  text-align: center;
}
.page-detail .info-box{
  padding: 30rpx;
  border-top: 2px solid #f8f8f8;
}
.info-content{
  font-size: 13px;
}

</style>
